import { useHistory } from 'react-router-dom';
import {
  Badge,
  Button,
  Popconfirm,
  Space,
  Table,
  message
} from 'antd';
import Column from 'antd/lib/table/Column';
import { useRequest } from 'ahooks';

import {
  DELETE_ANSWER,
  SEND_EMAIL
} from 'src/constants/api-constants';

interface ShowProps {
  total: number;
  tableLoading: boolean;
  page: number;
  answerList: Answer.AnswerShowItem[] | undefined
  requestTableData: (page: number) => void
}
export default ({
  total,
  tableLoading,
  page,
  answerList,
  requestTableData,
}: ShowProps) => {
  const history = useHistory();

  const { run: handleDeleteAnswer, loading: deleteLoading } = useRequest((
    mergeUuid: string
  ) => (
    {
      url: DELETE_ANSWER,
      method: 'DELETE',
      data: { mergeUuid }
    }
  ), {
    manual: true,
    onSuccess: () => {
      requestTableData(1);
    },
    onError: () => {
    },
  });

  const {
    run: sendEmail,
  } = useRequest((mergeUuid: string) => ({
    url: SEND_EMAIL,
    method: 'POST',
    data: {
      mergeUuid,
    }
  }), {
    manual: true,
    onSuccess: () => {
      message.success('反馈文档正在发送，大概需要等待1分钟');
    },
    onError: () => {
      message.error('反馈文件发送失败');
    }
  });

  const isInStandardSpan = (isInStandard: boolean) => {
    if (isInStandard === undefined) {
      return (
        <span>
          -
        </span>
      );
    }

    if (isInStandard) {
      return (
        <span>
          <Badge status="error" />
          超标
        </span>
      );
    }

    return (
      <span>
        <Badge status="success" />
        未超标
      </span>
    );
  };

  return (
    <>
      <Table
        size="middle"
        loading={tableLoading || deleteLoading}
        rowKey={(record: Answer.AnswerShowItem) => record.mergeUuid}
        dataSource={answerList}
        pagination={{
          current: page,
          onChange: (currentPage) => requestTableData(currentPage),
          total,
        }}
      >
        {/*   <Column
          title="唯一编号"
          dataIndex="uniqueString"
          key="uniqueString"
        /> */}
        <Column
          title="手机号"
          dataIndex="tel"
          key="tel"
          ellipsis
        />
        <Column
          title="所属问卷"
          dataIndex="templateTitle"
          key="templateTitle"
          ellipsis
          render={(templateTitle: string) => (
            templateTitle
          )}
        />
        <Column
          title="所属二级问卷"
          dataIndex="questionnaireName"
          key="questionnaireName"
          ellipsis
          render={(questionnaireName: string) => (
            questionnaireName
          )}
        />
        <Column
          title="是否完成"
          dataIndex="complateFlag"
          key="complateFlag"
          render={(complateFlag: number) => (
            complateFlag === 0 ? (
              <span>
                <Badge status="warning" />
                未完成
              </span>
            ) : (
              <span>
                <Badge status="success" />
                已完成
              </span>
            )
          )}
        />
        <Column
          title="是否超出指标"
          ellipsis
          render={(record: Answer.AnswerShowItem) => (
            <>
              {isInStandardSpan(record?.isInStandard)}
            </>
          )}
        />
        <Column
          title="完成时间"
          ellipsis
          render={(record: Answer.AnswerShowItem) => (
            record?.endTime ?? '-'
          )}
        />
        <Column
          title="持续时间"
          dataIndex="durningTime"
          key="durningTime"
          ellipsis
          render={(durningTime: string | undefined) => (
            durningTime ?? '-'
          )}
        />
        <Column
          width={350}
          title="操作"
          render={(record: Answer.AnswerShowItem) => (
            <Space>
              {/* <Button
                type="link"
                size="small"
                loading={false}
                onClick={() => {
                  window.open(`https://view.officeapps
                  .live.com/op/view.aspx?src=${
                    DOWNLOAD_FEEDBACK_DOCX}/?mergeUuid=${record.mergeUuid}`);
                }}
              >
                详情
              </Button> */}
              <Button
                type="link"
                size="small"
                onClick={() => {
                  // TODO: 跳转修改界面
                  history.push(`/home/answerSetting/${record.mergeUuid}/${record.templateUuid}/${record.templateTitle}/${record.questionnaireUuid}/${record.questionnaireName}`);
                }}
              >
                修改
              </Button>
              <Popconfirm
                title="删除后该问卷下的回答无法找回！是否删除?"
                onConfirm={() => {
                  handleDeleteAnswer(record.mergeUuid);
                }}
                okText="确定"
                cancelText="取消"
              >
                <Button type="link" size="small">
                  删除
                </Button>
              </Popconfirm>
              {
                record.email ? (
                  <Button
                    type="link"
                    size="small"
                    onClick={() => sendEmail(record.mergeUuid)}
                  >
                    重新发送
                  </Button>
                )
                  : (
                    <span style={{
                      color: '#888'
                    }}
                    >
                      未填写邮箱
                    </span>
                  )
              }
            </Space>
          )}
        />
      </Table>
    </>
  );
};
